<!-- 为什么这个和budgettable不合并？因为表格的宽度不一样，每一项单独设置太麻烦了。
 当然，可以额外设置api来定制不同的组合，但由于项目本身的大小以及budgettable组件的可拓展性本就不强，
 所以没有这个必要费那么大功夫来设置api。 -->
<template>
    <div>
        <!-- 数据表格 -->
        <el-table :data="budgetData" style="width: 100%" max-height="400px">
            <el-table-column fixed prop="time" label="日期" width="150" />
            <el-table-column prop="typeName" label="分类" width="120" v-if="budgetType===0" />
            <el-table-column prop="typeName2" label="分类" width="120" v-if="budgetType===1" />
            <el-table-column prop="memberName" label="成员" width="120" />
            <el-table-column prop="amount" label="金额（元）" width="120" />
            <el-table-column prop="beneficiary" label="商家" width="120" v-if="budgetType===1" />
            <el-table-column prop="description" label="描述" width="180" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template v-slot="scope">
                    <el-button link type="primary" size="large" @click="$emit('modifyClick',scope.row)">
                        <el-icon size="20">
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-button link type="primary" size="large" @click="$emit('deleteClick',scope.row)">
                        <el-icon size="20">
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="paganation">
            <el-pagination v-model:current-page="page.page" v-model:page-size="page.pageSize"
                layout="prev, pager, next" :total="total" @current-change="$emit('pageChange',page)" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { PageInfo } from '@/types/config';
import { ExpenseItemForDisplay } from '@/types/expense';
import { IncomeItemForDisplay } from '@/types/income';
import {ref} from 'vue'
defineProps<{
    budgetData:IncomeItemForDisplay[]|ExpenseItemForDisplay[],
    budgetType:number,
    total:number
}>()
defineEmits(['pageChange','modifyClick','deleteClick'])
let page=ref<PageInfo>({
    page:1,
    pageSize:10
})
</script>

<style scoped>
.paganation {
    margin-top: 40px;
}
</style>